<div
    id="siteadmin-config-providers-modal-create"
    class="tlp-modal siteadmin-config-providers-update-modal"
    tabindex="-1"
    role="dialog"
    aria-labelledby="siteadmin-config-providers-modal-create-title"
    aria-hidden="true"
>
    <div class="tlp-modal-header">
        <h1
            id="siteadmin-config-providers-modal-create-title"
            class="tlp-modal-title"
        >
            <i class="fa fa-plus tlp-modal-title-icon"></i> {{ add_new_provider }}
        </h1>
        <div
            class="tlp-modal-close"
            data-dismiss="modal"
            aria-label="Close"
        >&times;</div>
    </div>
    <form method="post">
        {{# csrf_token }}
            {{> csrf_token_input }}
        {{/ csrf_token }}
        <input type="hidden" name="action" value="create-provider">
        <div class="tlp-modal-body">
            <div id="provider-admin-modal-name-container">
                <div class="tlp-form-element" id="provider-admin-modal-name">
                    <label class="tlp-label" for="name">{{ name }} <i class="fa fa-asterisk"></i></label>
                    <input
                        type="text"
                        class="tlp-input provider-name"
                        id="name"
                        name="name"
                        placeholder="Github"
                        required
                    >
                </div>
                <div class="tlp-form-element" id="provider-admin-modal-icon">
                    <label class="tlp-label" for="icon">{{ icon }}</label>
                    <select
                        class="tlp-select provider-icon-selector"
                        id="icon"
                        name="icon"
                    >
                        <option value=""></option>
                        {{# icons_presenters }}
                        <option value="{{ icon }}"></option>
                        {{/ icons_presenters }}
                    </select>
                </div>
                <div class="tlp-form-element" id="provider-admin-modal-color">
                    <label class="tlp-label" for="color">{{ color }}</label>
                    <select
                        class="tlp-select provider-color-selector"
                        id="color"
                        name="color"
                    >
                        <option value=""></option>
                        {{# colors_presenters }}
                        <option value="{{ color }}"></option>
                        {{/ colors_presenters }}
                    </select>
                </div>
            </div>

            <div class="tlp-form-element">
                <label class="tlp-label" for="authorization_endpoint">
                    {{ authorization_endpoint }} <i class="fa fa-asterisk"></i>
                </label>
                <input
                    type="url"
                    class="tlp-input"
                    id="authorization_endpoint"
                    name="authorization_endpoint"
                    pattern="https://.+"
                    placeholder="{{ https_placeholder }}"
                    required
                >
            </div>

            <div class="tlp-form-element">
                <label class="tlp-label" for="token_endpoint">
                    {{ token_endpoint }} <i class="fa fa-asterisk"></i>
                </label>
                <input
                    type="url"
                    class="tlp-input"
                    id="token_endpoint"
                    name="token_endpoint"
                    pattern="https://.+"
                    placeholder="{{ https_placeholder }}"
                    required
                >
            </div>

            <div class="tlp-form-element" id="provider-admin-modal-userinfo-endpoint-container">
                <label class="tlp-label" for="userinfo_endpoint">
                    {{ userinfo_endpoint }}
                </label>
                <input
                    type="url"
                    class="tlp-input provider-user-info-endpoint"
                    id="userinfo_endpoint"
                    name="userinfo_endpoint"
                    pattern="https://.+"
                    placeholder="{{ https_placeholder }}"
                >
            </div>

            <div class="tlp-property">
                <p class="tlp-text-info">
                    <i class="fa fa-info-circle"></i> {{ client_help }} <br/>
                    <b>{{ callback_url }}</b>
                </p>
            </div>

            <div class="tlp-form-element">
                <label class="tlp-label" for="client_id">
                    {{ client_id }} <i class="fa fa-asterisk"></i>
                </label>
                <input
                    type="text"
                    class="tlp-input"
                    id="client_id"
                    name="client_id"
                    required
                >
            </div>

            <div class="tlp-form-element">
                <label class="tlp-label" for="client_secret">
                    {{ client_secret }} <i class="fa fa-asterisk"></i>
                </label>
                <input
                    type="text"
                    class="tlp-input"
                    id="client_secret"
                    name="client_secret"
                    required
                >
            </div>

            <div class="tlp-form-element">
                <p class="tlp-label" id="provider-admin-modal-preview-label">{{ preview }}</p>
                <div id="provider-admin-modal-provider-button-preview">
                    <button
                        type="button"
                        class="tlp-button-primary tlp-button-large"
                        id="provider-admin-modal-provider-button"
                    >
                        <i class="tlp-button-icon"></i>
                        <span>{{ btn_preview }}</span>
                    </button>
                </div>
            </div>
        </div>
        <div class="tlp-modal-footer">
            <button
                type="button"
                class="tlp-button-primary tlp-button-outline tlp-modal-action"
                data-dismiss="modal"
            >{{ btn_cancel }}</button>
            <button type="submit" class="tlp-button-primary tlp-modal-action">
                <i class="fa fa-plus tlp-button-icon"></i> {{ add_new_provider }}
            </button>
        </div>
    </form>
</div>
